<!-- 
		静态展示组件
		to: url, // 跳转url
		isJump: false // 是否多页跳转
 -->
<template>
	<div class="com-search-box">
		<div class="search-box" @click="evt_go">
			<div class="search-icon">
				<i class="iconfont icon-search"></i>
			</div>
			<p>任何城市·任何物业·任何价格</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { Flexbox, FlexboxItem } from 'vux'
	export default {
		name: 'com-search',
		props: {
			to: {
				type: String,
				default: '/search'
			},
			isJump: {
				type: Boolean,
				default: false
			}
		},
		data: () => {
			return {
				gutter: 0
			}
		},
		methods: {
			evt_go() {
				if (this.isJump) {
					location.href = this.to;
				} else {
					this.$router.push(this.to);
				}
			}
		},
		components: {
			Flexbox,
			FlexboxItem
		}
	}
</script>
<style lang="less">
	@import '../../assets/less/vars';
	.com-search-box {
		background-color: @clr-l-brown;
		padding: 20/75rem 30/75rem;
		color: @clr-white;
		.search-box {
			display: flex;
			align-items: center;
			border-radius: 4px;
			padding: 0 10/75rem;
			font-size: 24/75rem;
			height: 48/75rem;
			background-color: rgba(0, 0, 0, .1);
			p {
				flex: 1;
			}
			.search-icon {
				text-align: center;
				width: 40/75rem;
			}
			.iconfont {
				font-size: 26/75rem;
			}
		}
	}
</style>